<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>NippleJS</title>
        <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
        <style>
        html, body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            margin: 0;
        }

        #left {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 50%;
            background: rgba(0, 255, 0, 0.1);
        }

        #right {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 50%;
            background: rgba(0, 0, 255, 0.1);
        }
        </style>
    </head>
    <body>
        <div id="left"></div>
        <div id="right"></div>
        <script src="/dist/nipplejs.js"></script>
        <script>
            var joystickL = nipplejs.create({
                zone: document.getElementById('left'),
                mode: 'static',
                position: { left: '20%', top: '50%' },
                color: 'green',
                size: 200
            });

            var joystickR = nipplejs.create({
                zone: document.getElementById('right'),
                mode: 'static',
                position: { left: '80%', top: '50%' },
                color: 'red',
                size: 200
            });
        </script>
    </body>
</html>
